<template>
	<view id="apps">
		
		
		
		<!-- header -->
		<view class="header">
			
			<view class="so">
				<image src="../../static/images/icon_so@2x.png" mode="widthFix"></image>
				<input type="text" placeholder="爱添米" placeholder-class="placeholder">
			</view>
			<view class="sao">
				<image src="../../static/images/icon_sao@2x.png" mode="widthFix"></image>
				<image src="../../static/images/icon_kf@2x.png" mode="widthFix"></image>
			</view>
			
		</view>
		
		
		
		<!-- tab -->
		<view class="tab_box">
			
			<scroll-view scroll-x="true" class="scrollview">
				<view class="active">推荐</view>
				<view>食品</view>
				<view>百货</view>
				<view>美妆</view>
				<view>电器</view>
				<view>手机</view>
				<view>电脑</view>
			</scroll-view>
			
			<view class="navs">
				<image src="../../static/images/icon_navs@2x.png" mode="widthFix"></image>
			</view>
			
		</view>
		
		
		
		
		
		<!-- swiper 幻灯-->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/images/bns.png" mode="widthFix"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="../../static/images/bns.png" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		
		
		
		
		
		<!-- icon_list -->
		<view class="icon_list">
			<view class="item">
				<image src="/static/images/icon_ny@2x.png" mode="widthFix"></image>
				<text>N元任选</text>
			</view>
			<view class="item">
				<image src="/static/images/icon_dhzx@2x.png" mode="widthFix"></image>
				<text>兑换中心</text>
			</view>
			<view class="item">
				<image src="/static/images/icon_zdms@2x.png" mode="widthFix"></image>
				<text>整点秒杀</text>
			</view>
			<view class="item">
				<image src="/static/images/icon_pt@2x.png" mode="widthFix"></image>
				<text>拼团</text>
			</view>
			<view class="item">
				<image src="/static/images/icon_cj@2x.png" mode="widthFix"></image>
				<text>幸运抽奖</text>
			</view>
		</view>
		
		
		
		
		
		<!-- 每日好货  精选好货 -->
		<view class="hot_box">
			
			<!-- 每日好货 -->
			<view class="hot_item">
				<view class="title">
					<text class="t">每日好货</text>
					<view class="s">
						<image src="/static/images/icon_pzyx@2x.png" mode="widthFix"></image>
						<text>品质优选</text>
					</view>
				</view>
				<view class="list">
					<view>
						<image src="../../static/images/face.png" mode="widthFix"></image>
					</view>
					<view>
						<image src="../../static/images/face.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
			
			<!-- 精选好货 -->
			<view class="hot_item">
				<view class="title">
					<text class="t">品牌精选</text>
					<view class="s">
						<image src="/static/images/icon_pzjx@2x.png" mode="widthFix"></image>
						<text>品质精选</text>
					</view>
				</view>
				<view class="list">
					<view>
						<image src="../../static/images/face.png" mode="widthFix"></image>
					</view>
					<view>
						<image src="../../static/images/face.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		
		
		
		<!-- 秒杀单品 -->
		<view class="msdp_box">
			
			<view class="title">
				<text class="t">秒杀单品</text>
				<view class="time_box">
					<view class="s">
						<image src="/static/images/icon_sd@2x.png" mode="widthFix"></image>
						<text>12点场</text>
					</view>
					<text class="time">00 : 14 : 05</text>
				</view>
				<view class="more">
					<text>更多</text>
					<image src="/static/images/ck_ion01@2x.png" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="list">
				<view class="item">
					<image src="/static/images/face.png" mode="widthFix"></image>
					<view class="price">
						<text class="new">50.00</text>
						<text class="old">60.00</text>
					</view>
				</view>
				<view class="item">
					<image src="/static/images/face.png" mode="widthFix"></image>
					<view class="price">
						<text class="new">50.00</text>
						<text class="old">60.00</text>
					</view>
				</view>
				<view class="item">
					<image src="/static/images/face.png" mode="widthFix"></image>
					<view class="price">
						<text class="new">50.00</text>
						<text class="old">60.00</text>
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		
		
		
		
		<!-- 最新上架 -->
		<view class="new_pro">
			
			<view class="title">
				<text class="t">最新上架</text>
				<view class="s">
					<image src="/static/images/icon_time@2x.png" mode="widthFix"></image>
					<text>12整点更新</text>
				</view>
				<view class="more">
					<text>更多</text>
					<image src="/static/images/ck_ion01@2x.png" mode="widthFix"></image>
				</view>
			</view>
			
			<scroll-view scroll-x="true" class="new_prolist">
				<view class="item">
					<image src="../../static/images/face.png" mode="widthFix"></image>
					<text class="t">手撕面包整箱</text>
					<text class="pirce">29.90</text>
				</view>
				<view class="item">
					<image src="../../static/images/face.png" mode="widthFix"></image>
					<text class="t">手撕面包整箱</text>
					<text class="pirce">29.90</text>
				</view>
				<view class="item">
					<image src="../../static/images/face.png" mode="widthFix"></image>
					<text class="t">手撕面包整箱</text>
					<text class="pirce">29.90</text>
				</view>
				<view class="item">
					<image src="../../static/images/face.png" mode="widthFix"></image>
					<text class="t">手撕面包整箱</text>
					<text class="pirce">29.90</text>
				</view>
				<view class="item">
					<image src="../../static/images/face.png" mode="widthFix"></image>
					<text class="t">手撕面包整箱</text>
					<text class="pirce">29.90</text>
				</view>
				<view class="item">
					<image src="../../static/images/face.png" mode="widthFix"></image>
					<text class="t">手撕面包整箱</text>
					<text class="pirce">29.90</text>
				</view>
				<view class="item">
					<image src="../../static/images/face.png" mode="widthFix"></image>
					<text class="t">手撕面包整箱</text>
					<text class="pirce">29.90</text>
				</view>
			</scroll-view>
			
		</view>
		
		
		
		
		
		
		
		
		<!-- 好物专区 -->
		<view class="good_pro">
			
			<view class="title">
				<text class="t">好物专区</text>
				<view class="more">
					<text>更多优惠GO</text>
					<image src="/static/images/arr@2x.png" mode="widthFix"></image>
				</view>
			</view>
			
			<view class="list">
				<view class="item">
					<view class="img">
						<image src="../../static/images/face.png" mode="widthFix"></image>
					</view>
					<view class="desc">
						<text class="t">卫龙_魔芋爽</text>
						<view class="price">
							<text class="new">50.00</text>
							<text class="old">60.00</text>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image src="../../static/images/face.png" mode="widthFix"></image>
					</view>
					<view class="desc">
						<text class="t">卫龙_魔芋爽</text>
						<view class="price">
							<text class="new">50.00</text>
							<text class="old">60.00</text>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image src="../../static/images/face.png" mode="widthFix"></image>
					</view>
					<view class="desc">
						<text class="t">卫龙_魔芋爽</text>
						<view class="price">
							<text class="new">50.00</text>
							<text class="old">60.00</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
		
		
		
		
		<!-- 附近门店 -->
		<view class="fjmd_box">
			
			<view class="title">
				<text class="t">附近门店</text>
				<view class="more">
					<text>更多</text>
					<image src="/static/images/ck_ion01@2x.png" mode="widthFix"></image>
				</view>
			</view>
			
			<scroll-view scroll-x="true" class="new_prolist">
				
				<view class="item">
					<view class="logo">
						<image src="../../static/images/face.png" mode="widthFix"></image>
						<view class="text">
							<text class="t">爱添米</text>
							<text class="jl">距离1.2km</text>
						</view>
					</view>
					<view class="imglist">
						<view class="list_item">
							<image src="../../static/images/face.png" mode="widthFix"></image>
							<text>99.00</text>
						</view>
						<view class="list_item">
							<image src="../../static/images/face.png" mode="widthFix"></image>
							<text>99.00</text>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="logo">
						<image src="../../static/images/face.png" mode="widthFix"></image>
						<view class="text">
							<text class="t">爱添米</text>
							<text class="jl">距离1.2km</text>
						</view>
					</view>
					<view class="imglist">
						<view class="list_item">
							<image src="../../static/images/face.png" mode="widthFix"></image>
							<text>99.00</text>
						</view>
						<view class="list_item">
							<image src="../../static/images/face.png" mode="widthFix"></image>
							<text>99.00</text>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="logo">
						<image src="../../static/images/face.png" mode="widthFix"></image>
						<view class="text">
							<text class="t">爱添米</text>
							<text class="jl">距离1.2km</text>
						</view>
					</view>
					<view class="imglist">
						<view class="list_item">
							<image src="../../static/images/face.png" mode="widthFix"></image>
							<text>99.00</text>
						</view>
						<view class="list_item">
							<image src="../../static/images/face.png" mode="widthFix"></image>
							<text>99.00</text>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="logo">
						<image src="../../static/images/face.png" mode="widthFix"></image>
						<view class="text">
							<text class="t">爱添米</text>
							<text class="jl">距离1.2km</text>
						</view>
					</view>
					<view class="imglist">
						<view class="list_item">
							<image src="../../static/images/face.png" mode="widthFix"></image>
							<text>99.00</text>
						</view>
						<view class="list_item">
							<image src="../../static/images/face.png" mode="widthFix"></image>
							<text>99.00</text>
						</view>
					</view>
				</view>
				
			</scroll-view>
			
		</view>
				
				
				
				
				
				
		<!-- 分类-->
		<view class="class_tab">
			<scroll-view scroll-x="true" class="scrollview" style="height: 60rpx;">
				<view class="active">商品预售</view>
				<view>商品批发</view>
				<view>社交送礼</view>
				<view>套餐组合</view>
				<view>商品预售</view>
				<view>商品批发</view>
				<view>社交送礼</view>
				<view>套餐组合</view>
			</scroll-view>
		</view>		
				
				
				
		<!-- pro_list			 -->
		<view class="pro_list">
			
			<view class="item">
				<view class="img">
					<image src="../../static/images/face.png" mode="widthFix"></image>
				</view>
				<view class="desc">
					<text class="t">美的电饭煲美的电饭煲</text>
					<view class="footer">
						<text class="pirce">99.00</text>
						<view class="fk">
							<text>6</text>
							<text>人付款</text>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="img">
					<image src="../../static/images/face.png" mode="widthFix"></image>
				</view>
				<view class="desc">
					<text class="t">美的电饭煲</text>
					<view class="footer">
						<text class="pirce">99.00</text>
						<view class="fk">
							<text>6</text>
							<text>人付款</text>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="img">
					<image src="../../static/images/face.png" mode="widthFix"></image>
				</view>
				<view class="desc">
					<text class="t">美的电饭煲</text>
					<view class="footer">
						<text class="pirce">99.00</text>
						<view class="fk">
							<text>6</text>
							<text>人付款</text>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="img">
					<image src="../../static/images/face.png" mode="widthFix"></image>
				</view>
				<view class="desc">
					<text class="t">美的电饭煲</text>
					<view class="footer">
						<text class="pirce">99.00</text>
						<view class="fk">
							<text>6</text>
							<text>人付款</text>
						</view>
					</view>
				</view>
			</view>
			
			
		</view>		
		
		
		
		
		<!-- 加载 -->
		<view class="loading">
			<text class="t">正在加载</text>
			<text class="icon icon1"></text>
			<text class="icon icon2"></text>
			<text class="icon icon3"></text>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	
	page{
		background: #EFEFF4;
	}
	
	#apps{
		display: flex;
		flex-direction: column;
		
		
		// header
		.header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #fff;
			height: 88rpx;
			line-height: 88rpx;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			margin: auto;
			padding: 0 32rpx;
			box-sizing: border-box;
			z-index: 1000;
			.so{
				position: relative;
				flex: 1;
				margin-right: 20rpx;
				input{
					background: rgba(219, 219, 219, 0.37);
					height: 62rpx;
					line-height: 62rpx;
					border-radius: 10rpx;
					padding: 0 32rpx 0 60rpx;
					box-sizing: border-box;
					.placeholder{
						font-size: 24rpx;
						color: #999;
					}
				}
				image{
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					left: 16rpx;
					top: 0;
					bottom: 0;
					margin: auto;
				}
			}
			.sao{
				display: flex;
				align-items: center;
				image{
					width: 44rpx;
					height: auto;
					margin-left: 20rpx;
				}
			}
		}
		
		
		
		// tab_box
		.tab_box{
			display: flex;
			justify-content: space-between;
			height: 88rx;
			line-height: 88rpx;
			overflow: hidden;
			position: fixed;
			top: 88rpx;
			left: 0;
			right: 0;
			margin: auto;
			background: #fff;
			padding: 0 32rpx;
			box-sizing: border-box;
			z-index: 1000;
			.scrollview{
				::-webkit-scrollbar{width:0px; height:0px;}
				white-space: nowrap;
				view{
					display: inline-block;
					font-size: 32rpx;
					font-weight: bold;
					margin-right: 54rpx;
					color: #666;
					&:last-of-type{
						padding-right: 32rpx;
					}
					&.active{
						color: #333;
						font-size: 36rpx;
						position: relative;
						&::after{
							content: '';
							background:$index_color;
							width: 80%;
							height: 8rpx;
							display: inline-block;
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							z-index: -1;
							border-radius: 100px;
						}
					}
				}
			}
			.navs{
				position: absolute;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				background: #fff;
				box-shadow: 1px 1px 20px #ddd;
				width: 90rpx;
				height: auto;
				text-align: center;
				image{
					width: 44rpx;
					height: auto;
				}
			}
		}
		
		
		
		
		// swiper
		.swiper{
			display: block;
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 176rpx;
			
			image{
				width: 100%;
				height: auto;
				box-shadow: 0px 4rpx 12rpx rgba(0, 0, 0, 0.1);
				border-radius: 18rpx;
				overflow: hidden;
			}
		}

		
		
		
		// icon_list
		.icon_list{
			margin-top: 10rpx;
			display: grid;
			grid-template-columns: repeat(5,1fr);
			image{
				width: 54rpx;
				height: auto;
				display: block;
				margin: auto;
			}
			text{
				font-size: 28rpx;
				color: #333;
				display: block;
				text-align: center;
				margin: 10rpx 0;
			}
		}
		
		
		
		
		
		
		// hot_box
		.hot_box{
			padding: 20rpx 24rpx;
			display: grid;
			grid-template-columns: repeat(2,1fr);
			gap: 20rpx;
			box-sizing: border-box;
			align-items: center;
			justify-content: space-between;
			.hot_item{
				background: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				.title{
					display: flex;
					align-items: center;
					.t{
						font-size: 36rpx;
						color: #333;
						font-weight: bold;
					}
					.s{
						display: flex;
						margin-left: 20rpx;
						align-items: center;
						padding: 4rpx 10rpx;
						image{
							width: 24rpx;
							height: auto;
						}
						text{
							font-size: 22rpx;
							color: #fff;
							margin-left: 10rpx;
						}
						background: $index_color;
						border-radius: 100px;
					}
				}
				.list{
					display: grid;
					grid-template-columns: repeat(2,1fr);
					gap: 20rpx;
					align-items: center;
					justify-content: space-between;
					margin: 20rpx 0 0 0;
					image{
						width: 100%;
						height: auto;
						border-radius: 10rpx;
					}
				}
			}
		}
		
		
		
		
		
		// 秒杀单品
		.msdp_box{
			display: block;
			padding:16rpx 24rpx;
			box-sizing: border-box;
			.title{
				display: flex;
				align-items: center;
				.t{
					font-weight: bold;
					font-weight: 36rpx;
					color: #333;
				}
				.time_box{
					display: flex;
					align-items: center;
					border: 1px $index_color solid;
					border-radius: 100px;
					height: 36rpx;
					line-height: 36rpx;
					overflow: hidden;
					margin-left: 20rpx;
					.s{
						background: linear-gradient(177deg, #FFE0DE 0%, #F2675B 33%, #DE4335 100%);
						color: #fff;
						font-size: 24rpx;
						padding: 0 20rpx;
						box-sizing: border-box;
						border-radius: 100px 0 0 100px;
						display: flex;
						align-items: center;
						image{
							width: 16rpx;
							height: auto;
							margin-right: 10rrpx;
							display: block;
						}
						text{
							margin-left: 5rpx;
						}
					}
					.time{
						font-size: 24rpx;
						color: $index_color;
						padding: 0 20rpx;
						box-sizing: border-box;
					}
				}
				.more{
					margin-left: auto;
					font-size: 24rpx;
					color: #999;
					image{
						width: 12rpx;
						height: auto;
						margin-left: 8rpx;
					}
				}
			}
			
			.list{
				background: #fff;
				box-shadow: 0px 6rpx 8rpx rgba(93, 93, 93, 0.05);
				box-sizing: border-box;
				border-radius: 20rpx;
				margin: 20rpx 0;
				display: grid;
				padding: 20rpx;
				gap: 20rpx;
				grid-template-columns: repeat(3,1fr);
				.item{
					width: 100%;
					image{
						width: 100%;
						height: auto;
						display: block;
						margin: auto;
						border-radius: 10rpx;
						box-shadow: 0px 4rpx 4rpx rgba(0, 0, 0, 0.05);
					}
					.price{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 10rpx;
						box-sizing: border-box;
						text{
							&::before{
								content: '￥';
							}
						}
						.new{
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
						}
						.old{
							font-size: 22rpx;
							color: #999;
							text-decoration: line-through;
						}
					}
				}
			}
		}
		
		
		
		
		
		// 最新上架
		.new_pro{
			padding: 0 24rpx;
			box-sizing: border-box;
			.title{
				display: flex;
				align-items: center;
				.t{
					font-weight: bold;
					font-weight: 36rpx;
					color: #333;
				}
				.s{
					background: linear-gradient(177deg, #DEF0FF 0%, #F25B5B 33%, #DE3535 100%);
					color: #fff;
					font-size: 24rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
					border-radius:8rpx;
					display: flex;
					align-items: center;
					margin-left: 10rpx;
					image{
						width: 24rpx;
						height: auto;
						margin-right: 10rrpx;
						display: block;
					}
					text{
						margin-left: 5rpx;
					}
				}
				.more{
					margin-left: auto;
					font-size: 24rpx;
					color: #999;
					image{
						width: 12rpx;
						height: auto;
						margin-left: 8rpx;
					}
				}
			}
			
			.new_prolist{
				white-space: nowrap;
				padding: 20rpx 0;
				::-webkit-scrollbar{width:0px; height:0px;}
				.item{
					display: inline-block;
					margin-right: 20rpx;
					&:last-of-type{
						margin-right: 0;
					}
					image{
						width: 148rpx;
						height: auto;
						border-radius: 10rpx;
						display: block;
						margin: auto;
					}
					.t{
						font-size: 22rpx;
						color: #333;
						font-weight: bold;
						display: block;
						text-align: left;
						margin-top: 10rpx;
					}
					.pirce{
						font-size: 28rpx;
						color: $index_color;
						font-weight: bold;
						display: block;
						text-align: left;
						&::before{
							content: '￥';
						}
					}
				}
			}
		}
		
		
		
		
		// 好物专区
		.good_pro{
			margin:10rpx 24rpx 24rpx;
			box-sizing: border-box;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			.title{
				display: flex;
				align-items: center;
				.t{
					font-weight: bold;
					font-weight: 32rpx;
					color: #333;
				}
				.more{
					margin-left: auto;
					font-size: 20rpx;
					color: #fff;
					box-shadow: 0px 6rpx 12rpx rgba(222, 67, 53, 0.47);
					background: $index_color;
					border-radius: 100px;
					height: 34rpx;
					line-height: 34rpx;
					padding: 0 16rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					image{
						width: 12rpx;
						height: auto;
						margin-left: 8rpx;
					}
				}
			}
			
			.list{
				display: grid;
				grid-template-columns: repeat(3,1fr);
				gap: 20rpx;
				.item{
					background: #F5F5F5;
					border-radius: 20rpx;
					box-sizing: border-box;
					margin: 20rpx 0 0 0;
					.img{
						overflow: hidden;
						font-size: 0;
						image{
							width: 100%;
							height: auto;
							border-radius: 10rpx 10rpx  0 0;
							font-size: 0;
						}
					}
					.desc{
						padding: 0 10rpx 10rpx 10rpx;
						box-sizing: border-box;
						overflow: hidden;
						
						.t{
							font-size: 20rpx;
							color: #333;
							font-weight: bold;
						}
						.price{
							font-size: 24rpx;
							color: #FF5130;
							font-weight: bold;
							display: block;
							text-align: left;
							text{
								&::before{
									content: '￥';
								}
							}
							.old{
								font-size: 20rpx;
								color: #999;
								text-decoration: line-through;
								margin-left:10rpx;
								font-weight: normal;
							}
						}
					}
					
				}
			}
		}
		
		
		
		
		
		// 附近门店
		.fjmd_box{
			padding: 0 24rpx;
			box-sizing: border-box;
			
			.title{
				display: flex;
				align-items: center;
				.t{
					font-weight: bold;
					font-weight: 32rpx;
					color: #333;
				}
				.more{
					margin-left: auto;
					font-size: 24rpx;
					color: #999;
					image{
						width: 12rpx;
						height: auto;
						margin-left: 8rpx;
					}
				}
			}
			
			.new_prolist{
				white-space: nowrap;
				margin: 20rpx 0 0 0;
				::-webkit-scrollbar{width:0px; height:0px;}
				.item{
					background: #fff;				
					box-shadow: 0px 6px 8px rgba(93, 93, 93, 0.05);
					border-radius: 20rpx;
					padding: 20rpx;
					box-sizing: border-box;
					display: inline-block;
					margin-right: 20rpx;
					&:last-of-type{
						margin: 0;
					}
					.logo{
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;
						image{
							width: 108rpx;
							height: auto;
							border-radius: 100px;
						}
						.text{
							margin-left: 10rpx;
							.t{
								font-size: 28rpx;
								color: #333;
								font-weight: bold;
							}
							.jl{
								font-size: 22rpx;
								color: #999;
								display: block;
								text-align: center;
							}
						}
						
					}
					
					.imglist{
						display: grid;
						grid-template-columns: repeat(2,1fr);
						gap: 20rpx;
						box-sizing: border-box;
						image{
							width: 126rpx;
							height: auto; 
							border-radius: 10rpx;
							display: block;
							margin: auto;
						}
						text{
							font-size: 26rpx;
							color: #333;
							font-weight: bold;
							&::before{
								content: '￥';
							}
						}
					}
				}
			}
			
		}
		
		
		
		
		
		// 分类
		.class_tab{
			margin: 30rpx 24rpx;
			.scrollview{
				white-space: nowrap;
				::-webkit-scrollbar{width:0px; height:0px;}
				view{
					display: inline-block;
					position: relative;
					margin-right: 30rpx;
					padding-right: 30rpx;
					font-weight: 32rpx;
					color: #999;
					&.active{
						color: #333;
						font-weight: bold;
						&::before{
							content: '';
							position: absolute;
							left: 25%;
							bottom: -15rpx;
							width: 40%;
							height: 8rpx;
							background: $index_color;
							display: inline-block;
							margin: auto;
							border-radius: 100px;
						}
					}
					&::after{
						content: '';
						position: absolute;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						background: #999;
						height: 28rpx;
						width: 1px;
						display: inline-block;
					}
					&:last-of-type{
						padding: 0;
						margin-right: 0;
						&::after{display: none;}
					}
				}
			}
		}
		
		
		
		
		
		
		
		// .pro_list
		.pro_list{
			display: grid;
			grid-template-columns: repeat(2,1fr);
			gap: 20rpx;
			box-sizing: border-box;
			padding: 0 24rpx 24rpx 24rpx;
			
			
			.item{
				background: #fff;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				.img{
					width: 100%;
					height: auto;
					image{
						width: 100%;
						height: auto;
					}
				}
				.desc{
					.t{
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}
					.footer{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.pirce{
							font-size: 32rpx;
							color: #333;
							font-weight: bold;
							&::before{
								content: '￥';
							}
						}
						.fk{
							font-size: 24rpx;
							color: #999;
							text:first-of-type{
								color: $index_color;
							}
						}
					}
				}
			}
			
		}
		
		
		
		// 加载
		.loading{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 0 40rpx 0;
			box-sizing: border-box;
			.icon{
				width: 16rpx;
				height: 16rpx;
				display: inline-block;
				border-radius: 100px;
				margin: 0 5rpx;
				background: linear-gradient(170deg, #E2453B 0%, #FFA09B 100%);
			}
			.icon1{
				animation: my1 1s infinite;
				animation-delay:1s;
			}
			.icon2{
				animation: my2 1s infinite;
				animation-delay:1s;
			}
			.icon3{
				animation: my3 1s infinite;
				animation-delay:1s;
			}
			
			@keyframes my1{
				
				33%{
					width: 20rpx;
					height: 20rpx;
					background: #333;
				}
			}
			@keyframes my2{
				66%{
					width: 20rpx;
					height: 20rpx;
					background: #333;
				}
			}
			@keyframes my3{
				99%{
					width: 20rpx;
					height: 20rpx;
					background: #333;
				}
			}
			
			.t{
				font-size: 28rpx;
				color: #999;
				margin-right: 10rpx;
			}
		}
		
		
	}
	
</style>
